<template>
  <div class="consult-record-page">
    <div class="nav-bar">
      <div class="nav-status" :style="{height:statusH + 'px'}"></div>
      <div class="nav-head flex-center" :style="{height:titleH + 'px'}">
        <div class="flex-1 flex-row-v-center" style="padding-left: 10px;">
          <img style="width: 22px;height: 22px" src="/static/assets/img/icon/icon-arrow-left-white.png"
               @click="onClickGoBack()"/>
        </div>
        <div class="flex-1 flex-center">
          <span style="font-size: 18px; color:#FFFFFF">咨询记录</span>
        </div>
        <div class="flex-1"></div>
      </div>
    </div>
    <div class="consult-record-container" :style="{'padding-top':titleH + statusH + 'px'}">
      <div class="line"></div>
      <div class="record-title flex-row-v-center">
        <img src="/static/assets/img/icon_menu.png"/>
        <span>全部记录</span>
      </div>
      <scroll-view scroll-y>
        <div class="item flex-row-v-center" v-for="i in [1,2,3]">
          <div class="avatar">
            <img src=""/>
            <div class="point">11</div>
          </div>
          <div class="detail">
            <div class="top flex-row-space-between">
              <span>马医生</span>
              <span>2018-10-20</span>
            </div>
            <div class="desc">
              胸口气短做了个X光胸片诊断两肺纹理增多右下 肺结节影请问一下医生这是不是气管炎？
            </div>
          </div>
        </div>
        <div class="no-more">没有更多了</div>
      </scroll-view>
    </div>
  </div>
</template>

<script>
  import navbar from '@/components/navbar'
  import Core from 'core'
  import global from 'global'
  import Common from 'common'

  export default {
    components: {
      navbar
    },
    data () {
      return {
        statusH: global.state.statusH,
        titleH: global.state.titleH
      }
    },
    methods: {
      onClickGoBack () {
        Core.Util.goBack()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .consult-record-page {
    width: 100%;
    height: 100%;
    position: relative;

    .nav-bar {
      background: linear-gradient(to right, #84C5FD, #64DEEB);
    }

    .consult-record-container {
      width: 100%;
      height: 100%;

      .line {
        width: 100%;
        height: 10px;
        background: #F5F5F5;
      }

      .record-title {
        width: 100%;
        height: 46px;
        padding-left: 12px;
        border-bottom: 1px solid #F1F1F1;

        img {
          width: 15px;
          height: 15px;
        }
        span {
          margin-left: 9px;
          color: #313131;
          font-size: 16px;
        }
      }

      scroll-view {
        width: 100%;
        height: calc(100% - 56px);
      }

      .item {
        width: 100%;
        height: 100px;
        border-bottom: 1px solid #F1F1F1;
        padding-left: 23px;
        padding-right: 24px;

        .avatar {
          width: 60px;
          height: 60px;
          position: relative;

          img {
            width: 60px;
            height: 60px;
            border-radius: 30px;
            border: 1px solid #898989;
          }

          .point {
            position: absolute;
            right: -5px;
            top: -5px;
            min-width: 20px;
            min-height: 20px;
            text-align: center;
            line-height: 20px;
            color: #FFFFFF;
            border-radius: 100px;
            background: #F35E5E;
            font-size: 11px;
          }
        }

        .detail {
          width: calc(100% - 60px);
          padding-left: 22px;

          .top {
            width: 100%;

            span {
              color: #313131;
              font-size: 16px;
              font-weight: bold;
            }

            span + span {
              color: #767676;
              font-size: 12px;
            }
          }

          .desc {
            font-size: 12px;
            margin-top: 6px;
            color: #828080;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
        }
      }

      .no-more {
        width: 100%;
        height: 60px;
        text-align: center;
        line-height: 60px;
        font-size: 14px;
        color: #7A7A7A;
      }
    }
  }
</style>
